<template>
  <div>
    <div class="text">
      <div class="text-1" >
        <router-link
          to="/recommend"
          :class="{ on: '/recommend' === $route.path }"
          >推荐</router-link
        >
        <div :class="{ xian1: '/recommend' === $route.path }" ></div>
      </div>

      <div class="text-2" >
        <router-link
          to="/soon"
          :class="{ on: '/soon' === $route.path }"
          >即将上线
        </router-link>
         <div :class="{ xian2: '/soon' === $route.path }" ></div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
   
};
</script>

<style scoped>
.text {
  width: 100%;
  font-size: 0.16rem;
  display: flex;
  background-color: #fff;
}
.text-1 {
  width: 0.4rem;
  height: 0.52rem;
  text-align: center;
  margin-left:0.15rem ;

}
.text-2 {
  width: 0.8rem;
  height: 0.52rem;
  text-align: center;
  margin-left: 0.4rem;
}
a {
  color: #868c92;
}
.on {
  font-size: 0.2rem;
  color: #1d2127;
  font-weight: 700;
}
.xian1 {
  width: 0.24rem;
  height: 0.02rem;
  background-color: #15c5ce;
  margin-left: 0.08rem;
   margin-top: 0.05rem;

}
.xian2 {
  width: 0.24rem;
  height: 0.02rem;
  background-color: #15c5ce;
   margin-left: 0.3rem;
   margin-top: 0.05rem;
}
</style>